<template>
   <el-dialog v-model="dialogFormVisible" title="添加出库单" width="30%" >
    <el-form
      label-position="top"
      label-width="100px"
      :model="formLabelAlign"
      style="max-width: 100%"
    >
      <el-form-item label="单据类型">
        <el-select v-model="value" clearable placeholder="Item Type">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
        </el-select>
      </el-form-item>

      <el-form-item label="单据编号">
        <el-input  disabled placeholder="自动生成 无需填写" />
      </el-form-item>
      <el-form-item label="Activity form">
        <el-input v-model="formLabelAlign.type" />
      </el-form-item>
      <el-table  border show-summary style="width: 100%">
        <el-table-column prop="id" label="货品编号" width="180" />
        <el-table-column prop="name" label="货品名称" />
        <el-table-column prop="specification"  label="规格" />
        <el-table-column prop="quantity" sortable label="数量" />
        <el-table-column prop="price" sortable label="价格" />
        <el-table-column prop="orderDate"  label="出库日期" />
        <el-table-column prop="permission"  label="审批是否通过" />
      </el-table>

    </el-form>
   </el-dialog>
  </template>

  <script lang="ts" setup>
  import { reactive, ref } from 'vue'

  const formLabelAlign = reactive({
    name: '',
    region: '',
    type: '',
  })

const value = ref('')
const options = [
  {
    value: '销售出库',
    label: '销售出库',
  },
  {
    value: '采购退货出库',
    label: '采购退货出库',
  },
  {
    value: '其它出库',
    label: '其他出库',
  },
]
const dialogFormVisible =ref(false)
  </script>
<style scoped>
/* 样式规则 */
</style>